<template>
	<view class="pageItem">
		<view class="main">
			<view class="main_con">
				<block v-for="(item,index) in list" :key="'r_'+index">
					<view class="row" :class="item.my_state == 1 ? 'row_s':''" @click="change_idx(index)">
						<view class="mask1" v-if="item.my_state == 2"><label class="m1_icon iconfont">&#xe731;</label></view>
						<view class="mask2" v-else-if="!item.my_state"><label class="m2_icon">未达成</label></view>
						<view class="r_con">
							<view class="r_c_t1">{{item.title}}</view>
							<view class="r_c_t2">{{item.remark}}</view>
						</view>
						<view class="r_num">
							<label class="num">{{item.score}}</label>
							<image class="logo" src="/static/other/diamond_mini.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
               list : [],
			   cur_idx : -1,
			};
		},
		onLoad() {
			this.initData();
		},
		methods:{
			initData(){
				let url = this.site_url + 'api/index/ach_list';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.list = res.data;
					}
				})
			},
			change_idx(idx){
				
				let stu = this.list[idx].my_state;
				 if(stu == 1){
					
					uni.showModal({
						title: this.$t('system.tip17'),
						content: this.$t('system.tip18'),
						success:  (res) => {
							if (res.confirm) {
								//console.log('用户点击确定');
								uni.showLoading({
									title: this.$t('acc.loading')+'...',
									mask: true,
								});
								helper.Timer.start();
								let ach_id = this.list[idx].id;
								let url = this.site_url + 'api/auth/member/ach_handle?ach_id='+ach_id;
								this.areq(url,'POST').then(res=>{
									helper.Timer.stop();
									let left_time = helper.Timer.getLeftTime(2000);
									setTimeout(()=>{
										uni.hideLoading();
										if(res.code == 1){
											this.showMsg(this.$t('system.tip30'), 2000, true, 'success');
										}else{
											this.showMsg(res.msg);
										}
									},left_time);	
								})
								
							} else if (res.cancel) {
								//console.log('用户点击取消');
							}
						}
					});
					
					
				 }else if(stu == 2){
					   this.showMsg(this.$t('system.tip19'));
				 }else{
					  this.showMsg(this.$t('system.tip20'));
				 }
			   this.cur_idx = idx;
			   
			},
			tipFun(e){
				//这边要判断如果是已领和不可领取，弹出领取要求说明。如果是可领提示领取成功
				if(item.type){
					uni.showToast({
						icon:'success'
					})
				}else{
					uni.showModal({
						content: e.currentTarget.dataset.txt,
						showCancel:false,
						confirmText:this.$t('use.know'),
						confirmColor:"#ff2b63"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 4vw 4% 0;
	.main_con{
		width: 100%;
		.row:not(:first-child){
			margin-top: 2vw;
		}
		.row_s{
			border: 1vw solid $main_color_s2;
		}
		.row{
			width: 100%;
			@include card_style();
			overflow: hidden;
			display: flex;
			align-items: center;
			position: relative;
			.mask1{
				background: rgba(255,17,105,0.2);
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				z-index: 2;
				.m1_icon{
					font-size: 10vw;
					color: #fede5c;
					margin-left: 5vw;
				}
			}
			.mask2{
				background: rgba(255, 255, 255, 0.4);
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				z-index: 2;
				.m2_icon{
					font-size: 5vw;
					color: #000000;
					font-weight: bold;
					margin-left: 5vw;
					transform: rotate(-30deg);
				}
			}
			.r_con{
				flex: 1;
				position: relative;
				z-index: 1;
				.r_c_t1{
					width: 100%;
					font-size: 4vw;
					font-weight: bold;
					color: $main_color_s2;
					@include text_over_style(1);
				}
				.r_c_t2{
					width: 100%;
					color: $main_color4;
					font-size: 3.3vw;
					padding-top: 2vw;
					@include text_over_style(1);
				}
			}
			.r_num{
				font-size: 5vw;
				font-weight: bold;
				line-height: 6vw;
				position: relative;
				z-index: 1;
				.num{
					color: $price_color;
				}
				.logo{
					width: 4vw;
					margin-left: 2vw;
				}
			}
		}
	}
}
</style>
